<template>
  <div>
    <div class="kflexc">

      <div class="kflexcc" @click="call(address_mobile,'cloud')" v-if="keboda"
        style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(241, 243, 255); border: 1px solid rgb(41, 74, 233); color: rgb(41, 74, 233); margin-left: 20px; cursor: pointer;">
        <div>电信</div>
        <div><img src="../../../static/kuanping/dianxin.png" style="height: 18px; margin-left: 10px; display: block;" />
        </div>
      </div>
      <div class="kflexcc" @click="call(address_mobile,'mobile')" v-if="keboda"
        style="height: 32px; border-radius: 20px; min-width: 100px; background: rgb(255, 233, 237);border: 1px solid rgb(207, 0, 38); color: rgb(207, 0, 38); margin-left: 20px; cursor: pointer;">

        <div>手机</div>
        <div><img src="../../../static/kuanping/shouji.png" style="height: 18px; margin-left: 10px; display: block;" />
        </div>
      </div>
<!--      <div class="kflexcc" @click="call(address_mobile,'yidong')" v-if="keboda"
        style="height: 32px; border-radius: 20px; min-width: 100px; background: #EEF7FF;border: 1px solid rgb(224, 48, 109); color: rgb(224, 48, 109); margin-left: 20px; cursor: pointer;">

        <div>移动</div>
        <div><img src="../../../static/kuanping/yidong.png" style="height: 18px; margin-left: 10px; display: block;" />
        </div>
      </div> -->

      <div class="kflexcc" @click="guaduan(address_mobile)" v-if="!keboda && hujiaozhuangtai.status_name != '已挂断'"
        style="height: 32px; cursor: pointer; border-radius: 20px; min-width: 100px; background: rgb(244, 0, 76); border: 1px solid rgb(244, 0, 76); color: #fff; margin-left: 20px; cursor: pointer;">
        <div><img src="../../../static/kuanping/guaduan.png" style="width: 20px; margin-right: 10px;" /></div>
        <div>挂断</div>
      </div>

      <span style="color: rgb(150, 150, 150); margin-left: 20px;" v-if="!hujiaozhuangtai.error"
        :class="hujiaozhuangtai.status_name=='接听中'?'lvse':''">{{hujiaozhuangtai.status_name}}</span>
      <div @click="call(address_mobile,'zaici')" style="color: rgb(0, 126, 255); cursor: pointer; margin-left: 20px;"
        v-if="hujiaozhuangtai.status_name == '已挂断'">再次拨打</div>

    </div>
    <div>
      <el-divider content-position="center"  v-if="!show" ><div style="cursor: pointer;" @click="show = true">展开 <i class="el-icon-arrow-down"></i></div></el-divider>

      <el-divider content-position="center" v-if="show" style="cursor: pointer;"> <div style="cursor: pointer;" @click="show = false">收起 <i class="el-icon-arrow-up"></i></div></el-divider>
      <div v-if="show" >
        <div class="kflexb" v-for="item in call_logs" :key="item.id" style="margin-bottom: 10px;">
          <div class="kflexc">
            <div style="color: rgb(112, 112, 112); width: 180px;">{{item.created_at}}</div>
            <div style="width: 100px ; color: rgb(81, 201, 63);" v-if="item.called == 1">已接通</div>
            <div style="width: 100px ; color: rgb(214, 87, 87);" v-if="item.called == 0">未接通</div>
            <div style="width: 100px ; color: rgb(81, 201, 63);">时长:{{item.time}}秒</div>
          </div>
          <div>
            <div class="audioplay" v-if="item.record">
            	<audio class="audio" controls>
                <source :src="item.record" type="audio/mpeg">
            		您的浏览器不支持 audio 元素。
            	</audio>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import axios from "axios";
  export default {
    name: 'tousuindex',
    props:['call_logs','order_id',"job_id"],
    data() {
      return {
        callform: "",
        hujiaozhuangtai: "",
        jiale: false,
        keboda: true,
        terminal: "",
        dianxinshebie: "",
        shoujishebie: "",
        ws: "",
        log_id:"",
        cuowu:"",
        logerror:"",
        show:false,
        address_mobile:""
      }
    },
    created() {
      axios.post('/api/plan-market/admin/complaint/job/order/info',{order_id:this.order_id})
      	.then(response => {
      		if (response.data.msg.code == 0) {
      			this.address_mobile = response.data.data[0].address_mobile
      		} else {
      			this.$message.error(response.data.msg.info);
      		}
      	})

    },
    mounted() {
      axios.get("/api/plan-market/call/user/device")
        .then(response => {
          if (response.data.msg.code == 0) {
            this.shebei = response.data.data
            if (this.shebei.list && this.shebei.list.length > 0) {
              this.shebei.list.forEach(item => {
                if (item.terminal == 'cloud') {
                  this.dianxinshebie = item.device_id
                }
                if (item.terminal == 'mobile') {
                  this.shoujishebie = item.device_id
                }
              })
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      this.websocket2()
    },
    methods: {

      websocket2() {
        var that = this
        if (typeof(WebSocket) === "undefined") {
          this.$message.error("您的浏览器不支持socket")
        } else {
          if(location.href.includes('118.190.155.55') || location.href.includes('localhost')){
            this.ws = new WebSocket("ws://118.190.155.55:8995");
          } else {
            this.ws = new WebSocket("wss://ws.91haoka.cn:8995");
          }
          this.ws.onopen = function() {
            console.log("开始链接");
          }
          this.ws.onmessage = function(e) {
            console.log('收到消息：' + e.data)
            // JSON.parse(e.data) == 'what'  不知道干啥的回复
            if (JSON.parse(e.data) == 'what' || JSON.parse(e.data).type == '@heart@' || JSON.parse(e.data)
              .status_name == '连接成功') {

            } else {
              if (JSON.parse(e.data) == 'failed' || JSON.parse(e.data).error) {
                console.log(JSON.parse(e.data).error)
                that.hujiaozhuangtai.status_name = ""
                that.cuowu = '未检测到您的账号登录手机拨号APP，请先登录手机设备后再拨打'
                if (JSON.parse(e.data).error == '未连接') {
                  that.cuowu = JSON.parse(e.data).error
                  axios.get("/api/plan-market/call/user/device")
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        that.shebei = response.data.data
                        if (that.shebei.list && that.shebei.list.length > 0) {
                          that.shebei.list.forEach(item => {
                            if (item.terminal == 'cloud') {
                              that.dianxinshebie = item.device_id
                            }
                            if (item.terminal == 'mobile') {
                              that.shoujishebie = item.device_id
                            }
                          })

                        }

                      } else {
                        that.$message.error(response.data.msg.info);
                      }
                    })
                }
                console.log('出错了')
                that.logerror = true
                that.keboda = true
              } else {
                if (JSON.parse(e.data).status_name == '已连接') {
                  that.hujiaozhuangtai = JSON.parse(e.data)
                  axios.get("/api/plan-market/call/user/device")
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        that.shebei = response.data.data
                        that.shebei.list.forEach(item => {
                          if (item.terminal == 'cloud') {
                            that.dianxinshebie = item.device_id
                          }
                          if (item.terminal == 'mobile') {
                            that.shoujishebie = item.device_id
                          }
                        })
                      } else {
                        that.$message.error(response.data.msg.info);
                      }
                    })
                } else {
                  that.hujiaozhuangtai = JSON.parse(e.data)
                  that.keboda = false
                }
              }
            }

          }
          this.ws.onclose = function(e) {
            this.ws = ""
          }
          this.ws.onerror = function(e) {
            console.log(error);
          }
        }
      },
      addlog:function(){

      },
      //拨打
      call(mobile, terminal) {
        this.keboda = false
        if(terminal != 'zaici'){
          this.terminal = terminal
        }
        axios.post("/api/plan-market/admin/complaint/job/call-log/add", {
            job_id: this.job_id,
          })
          .then(response=> {
            if (response.data.msg.code == 0) {
              this.log_id = response.data.data.log_id
              this.bodago(response.data.data.log_id, mobile, this.terminal)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      bodago: function(log_id, mobile, terminal) {
        let d = ""
        if (terminal == 'mobile') {
          d = this.shoujishebie
        }
        if (terminal == 'cloud') {
          d = this.dianxinshebie
        }
        let obj = {
          type: "call_start",
          device_id: d,
          mobile: mobile,
          log_id: this.log_id,
          operation_type: "call_start",
          terminal: terminal,
          tab: "work_order"
        }
        this.ws.send(JSON.stringify(obj));
      },
      guaduan: function(mobile) {
        let d = ""
        if (this.terminal == 'shouji') {
          d = this.shoujishebie
        }
        if (this.terminal == 'cloud') {
          d = this.dianxinshebie
        }
        let obj = {
          type: "call_start",
          device_id: d,
          mobile: mobile,
          log_id: this.log_id,
          operation_type: "call_off",
          terminal: this.terminal,
          tab: "work_order"
        }
        this.ws.send(JSON.stringify(obj));
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
